{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作战指挥中心</title>
    <link type="text/css" rel="stylesheet" href="{% static 'css/index.css' %}"/>
    <link type="text/css" rel="stylesheet" href="{% static 'css/image-dialog.css' %}"/>
    <script src="https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key=DQEDAKtN2/sWO9YDYYxCVBRDVrNe4SIjByIYuqmfhgZdn0gXOvdK5h/bYPm/A7RAogDdX0Y9UtTDDUxju%2ByEBMIlNcxgdlwZneFPKg%3D%3D"></script>
    <script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
    <script src="{% static 'js/gauge.js' %}"></script> <!-- 引入生成飞行数据仪表JS -->
    <script src="{% static 'js/pieChart.js' %}"></script> <!-- 引入生成障碍物数据饼图JS -->
    <script src="{% static 'js/basicOperation.js' %}"></script> <!-- 引入基础操作JS -->
    <script src="{% static 'js/orderLog-manage.js' %}"></script> <!-- 引入指令日志管理JS -->
    <script src="{% static 'js/dom-manage.js' %}"></script> <!-- 引入基础dom绑定操作JS -->
    <script src="{% static 'js/map-manage.js' %}"></script> <!-- 引入地图管理JS -->
    <script src="{% static 'js/websocket-manage.js' %}"></script> <!-- 引入websocket管理JS -->
</head>
<body>
<div class="box">
    <div class="header">
        <div class="header-left">
            <span class="header-time-text"></span>
            <span class="header-date-text"></span>
            <span class="header-date-text">天气: 多云 </span>
        </div>
        <div class="header-right">
        </div>
    </div>
    <div class="center">
        <div class="center-left">
            <div class="component">
                <div class="component-title">
                    <span class="component-title-text">无人机位置</span>
                </div>
                <div class="component-status-body">
                    <div class="jtac-linkStatus-div">
                        <span class="top-text" style="font-size: 38px">正常</span>
                        <span class="bottom-text">通信状态</span>
                    </div>
                    <div class="jtac-posStatus-div">
                        <div class="jtac-position-div">
                            <span class="top-text" id="jtac-lon">47.1234561</span>
                            <span class="bottom-text">经度</span>
                        </div>
                        <div class="jtac-position-div">
                            <span class="top-text" id="jtac-lat">108.9633371</span>
                            <span class="bottom-text">纬度</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="component" style="margin-top: 20px">
                <div class="component-title">
                    <span class="component-title-text">飞行状态</span>
                </div>
                <div class="component-body" style="height: 300px">
                    <div class="gauge-container" id="gauge-speed"></div>
                    <div class="gauge-container" id="gauge-yaw"></div>
                    <div class="gauge-container" id="gauge-roll"></div>
                    <div class="gauge-container" id="gauge-pitch"></div>
                </div>
            </div>
            <div class="component" style="margin-top: 25px">
                <div class="component-title">
                    <span class="component-title-text">探测障碍物统计</span>
                </div>
                <div class="component-body" style="height: 210px">
                    <div id="obstacle-chart" class="chart-pie"></div>
                </div>
            </div>
        </div>
        <div class="center-center">
            <div id="map_container"></div>
        </div>
        <div class="center-right">
            <div class="component">
                <div class="component-title">
                    <span class="component-title-text">控制指令日志</span>
                </div>
                <div class="component-body scroller1" style="overflow: auto">
                    <div id="log-container"></div>
                </div>
            </div>
            <div class="component" style="margin-top: 30px">
                <div class="component-title">
                    <span class="component-title-text">航线信息</span>
                </div>
                <div class="component-body">
                    <div class="route-list">
                        {% for route in route_querySet %}
                            <div class="route-item">
                                <div class="route-header">
                                    <span class="route-icon"><img style="width: 50px" alt=""
                                                                  src="{% static '/img/分组 4.png' %}"></span>
                                    <span class="route-details-time">{{ route.release_time|date:"Y年m月d日 H:i:s" }}</span>
                                </div>
                                <div class="route-details">
                                    <span class="route-name">{{ route.route_name }}</span>
                                    <span class="route-details-state">状态:&nbsp<span
                                            style="color:{{ route.get_state_color }}">{{ route.state }}</span></span>
                                    <button class="route-button">查看</button>
                                </div>
                            </div>
                        {% empty %}
                            <div class="no-routes">暂无航线数据</div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="component" style="margin-top: 30px">
                <div class="component-title">
                    <span class="component-title-text">任务纪要</span>
                </div>
                <div class="component-body scroller1" style="overflow: auto;height: 260px">
                    <div class="task-list">
                        {% for task in task_list %}
                            <div class="task-card">
                                <div class="task-preview" data-task-id="{{ task.id }}">
                                    {% if task.imgs_path %}
                                        <img src="{{ task.get_preview_image }}"
                                             alt="任务预览图"
                                             class="preview-image"
                                             onerror="this.style.display='none'">
                                    {% else %}
                                        <div class="no-image">暂无图片</div>
                                    {% endif %}
                                </div>
                                <div class="task-info">
                                    <span class="task-id">任务ID：{{ task.id }}</span>
                                    <span class="task-title">{{ task.task_name|default:"未命名任务" }}</span>
                                    {% if '打击' in task.task_name %}
                                        <span class="view-result"
                                              onclick="getStrikeResult('{{ task.id }}')">(查看打击结果)</span>
                                    {% endif %}
                                    <span class="task-time">{{ task.release_time|date:"Y年m月d日 H:i" }}</span>
                                </div>
                            </div>
                        {% empty %}
                            <div class="no-task">当前没有待展示的任务</div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="imageDialog" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div class="images-grid"></div>
        </div>
    </div>
    <!-- 毁伤评估结果弹窗容器 -->
    <div id="resultModal" class="damage-modal" style="display:none;">
        <div class="damage-modal-content">
            <span class="damage-close" onclick="closeModal()">&times;</span>
            <pre id="resultContent"></pre>
        </div>
    </div>
</div>
</body>
<script>
    // 指令日志示例调用
    addLogEntry('巡查无人机', '指令信息示例');
    //首部左方时间显示
    updateTime();
    // 每秒更新一次时间
    setInterval(updateTime, 1000);
    // 调用dom绑定函数
    bindDomContentLoaded();
</script>
</html>